import React  from 'react';
// 生命周期更新03
class App extends React.Component{
  state = {
    text: "11111111111",
  };
  render() {
    return (
      <div>
        {this.state.text}
        <button
          onClick={() => {
            this.setState({
              text: "222222222222",
            });
          }}
        >
          click
        </button>
        <Child text={this.state.text} />
      </div>
    );
  }
}


class Child extends React.Component {
  state = {
    title: "",
  };
  render() {
    return <div>child-{this.state.title}</div>;
  }

  componentDidMount() {
    this.setState({
      title: this.props.text + "kerwin",
    });
  }

  /**
   * 用于在组件接收新的属性（props）时进行相应的操作。它在组件更新之前被调用，可以用来检查新的属性和当前属性之间的差异，并根据需要更新组件的状态或执行其他操作‌
   * 在React 16.3版本之后，componentWillReceiveProps被标记为过时（deprecated），并推荐使用新的生命周期方法getDerivedStateFromProps来替代。getDerivedStateFromProps是一个静态方法，接收props和state作为参数，并返回一个对象来更新state，或者返回null不更新任何状态‌
   * @param {*} nextProps 
   */
  componentWillReceiveProps(nextProps) {
    console.log("componentWillReceiveProps", nextProps);

    // 最先获得父组件传来的属性， 可以利用属性进行ajax或者逻辑处理。
    // 把属性转化成孩子自己的状态。
    this.setState({
      title: nextProps.text + "kerwin",
    });
  }
}

export default App;
